<template>
  <div class="informDocument">
    <tmpHeader :index='11'/>
    <div class="iheader">
        <Button type="info" @click='addFollow'>
          <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
        </Button>
    </div>
    <Table stripe :columns="columns1" :data="data1" style="margin:10px 0;"></Table>
    <!-- <Page :total="count" @on-change="pageChange" :current="pageNo" :page-size='pageSize' style='text-align:center;' /> -->

    <Modal
        v-model="modalStatus"
        :title="modalTitle"
        :mask-closable='false'
        :closable='false'
        footer-hide
        width='1000'>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
            <FormItem label="告知书标题：" prop="title">
                <Input v-model="formValidate.title" placeholder="请输入告知书标题" style='width:770px;' maxlength="100"></Input>
            </FormItem>
            <FormItem label="告知书类型：" prop="type">
                <Select v-model="formValidate.type" style="width:120px">
                    <Option v-for="(item, index) in followList" :value="item.id" :key="index" style='text-align:center;'>{{ item.name }}</Option>
                </Select>
            </FormItem>
            <FormItem label="告知书内容：" prop="content">
              <vueEditor
                v-if="modalStatus"
                id="homeInfo"
                :textHtml="formValidate.content"
                :urlCode="urlCode"
                @valueHandle="afterChange"
                style="width:95%;height:50%;margin:0 10px;margin-left: 0px;"
              ></vueEditor>
            </FormItem>
            <div style="textAlign: center;margin: 10px 20px">
                <Button type="primary" :disabled='disabledSave'  @click="handleSubmit('formValidate')" style="width:75px;height:35px;">
                  <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                </Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px;width:75px;height:35px;">
                  <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i> 取消
                </Button>
            </div>
        </Form>
    </Modal>

  </div>
</template>
<script>
import tmpHeader from "@/pages/organizat/contentmen/tmpHeader";
import api from "@/api/commonApi";
import code from "@/configs/base.js";
import vueEditor from "@/components/vueEditor";
export default {
  components: {
    tmpHeader,
    vueEditor
  },
  data() {
    return {
      urlCode: '{"urlCode":"' + code.urlCode.richText + '"}',
      pageNo: 1,
      pageSize: 10,
      count: 10,
      id: sessionStorage.getItem("hospitalId"),
      columns1: [
        {
          title: "排序",
          key: "isum",
          align: "center"
        },
        {
          title: "标题",
          key: "title",
          align: "center"
        },
        {
          title: "类型",
          key: "type",
          align: "center"
        },
        {
          title: "设置",
          align: "center",
          render: (h, params) => {
            let row = params.row;
            return [
              h(
                "a",
                {
                  on: {
                    click: () => {
                        this.modalStatus = true;
                        this.disabledSave = false
                        this.modalTitle = '编辑新告知书'
                        this.$axios.post(api.agreementById,{
                            id: row.id
                        }).then(res => {
                            console.log(res);
                            if(res.data.success) {
                                let ret = res.data.object;
                                this.formValidate.content = ret.content
                                this.formValidate.title = ret.title
                                this.formValidate.id = ret.id
                                this.formValidate.type = ret.type
                            } else {
                                this.$Message.error('加载告知书详情失败')
                            }
                        })
                    }
                  }
                },
                "编辑"
              )
            ];
          }
        }
      ],
      data1: [],
      formValidate: {
        content : "",
        title : "",
        id : "",
        type : null
      },
      ruleValidate:{
        title: [{ required: true, message: '请输入告知书标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入告知书内容', trigger: 'blur' }],
        type: [{ required: true, message: '请输入告知书类型', trigger: 'change' ,type:'number' }]
      },
      modalStatus: false,
      modalTitle :"新增告知书",
      followList:[
        {id:1,name:"签约随访"},
        {id:2,name:"预约挂号"},
        {id:3,name:"家医签约协议"},
        {id:4,name:"在线复诊"},
      ],
      disabledSave: false
    };
  },
  created () {
      let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/operation/mechanism/index",
        title: "机构运营"
      },
      {
        path: "/index/operation/followupNotice/index",
        title: "随访告知书"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted () {
    this.loadingData(1)
  },
  methods: {
    afterChange(val) {
      this.formValidate.content = val;
      console.log(val);
    },
    pageChange(index) {
        this.loadingData(index)
    },
    // 添加按钮
    addFollow () {
        this.modalStatus = true;
        this.disabledSave = false
        this.modalTitle = '添加新告知书'
    },
    // 保存按钮
    handleSubmit (name) {
        this.disabledSave = true
        this.$refs[name].validate((valid) => {
            if (valid) {
                let url = '';
                let params = {
                  hospitalId: this.id,
                  content: this.formValidate.content,
                  title: this.formValidate.title,
                  type: this.formValidate.type,
                }
                if(!Boolean(this.formValidate.id)) {
                  url = api.insertAgreement
                } else {
                  url = api.updateAgreement
                  params.id = this.formValidate.id
                }
                this.$axios.post(url, params).then(res => {
                    console.log(res);
                    if(res.data.success) {
                      this.handleReset('formValidate')
                      this.loadingData(1)
                      this.$Message.success('保存成功')
                      setTimeout(() => {
                        this.disabledSave = false
                      }, 2000);
                    } else {
                      let message = res.data.message;
                      if (res.data.object) {
                        message = res.data.object.same || res.data.object.file;
                      }
                      this.$Message.error(message);
                      this.disabledSave = false
                    }
                }).catch(err => {
                  this.$Message.error('已添加该类型随访告知书，请检查');
                  this.disabledSave = false
                });
            } else {
                this.$Message.error('请完整填写必填项!');
                this.disabledSave = false
            }
        })
    },
    handleReset (name) {
        this.modalStatus = false;
        this.$refs[name].resetFields();
        this.formValidate.content = ''
        this.formValidate.title = ''
        this.formValidate.id = ''
        this.formValidate.type = ''
    },
    loadingData (pageNo) {
        let url = api.agreementPage
        let params = {
            pageNo,
            pageSize: this.pageSize,
            hospitalId: this.id,
        }
        this.pageNo = pageNo;
        this.$axios.post(url, params).then(res => {
            if(res.data.success) {
              console.log(res);
                let ret = res.data.object.records;
                ret.forEach((item,index) => {
                    item.isum = this.addZeros(index)
                    if(item.type == 1){
                      item.type = '签约随访'
                    } else if(item.type == 2) {
                      item.type = '预约挂号'
                    } else if(item.type == 3) {
                      item.type = '家医签约协议'
                    }
                })
                this.data1 = ret
            } else {
                this.$Message.error('查询告知书列表失败')
            }
        })
    }
  }
};
</script>
<style lang="less" scoped>
.informDocument {
  width: 100%;
  padding: 10px 30px;
  margin: 0 auto;
  background: #fff;
  .iheader {
        width: 100%;
        margin: 10px auto;
        display: flex;
    }
}
.ivu-form-item-content .tinymce-editor {
  margin: 0;
}
</style>
